<template>
  <div id="AppointmentUserDe">
    <c-title :hide="false" text=""></c-title>
    <div class="userDetail">
      <div class="usetTop">
        <div class="imgbox">
          <img  v-if="obj_info.thumb" :src="obj_info.thumb"  />
          <img v-else src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/error_thumb.png" />
        </div>
        <div class="detail">
          <div class="name">{{ obj_info.name }}</div>
          <div class="total">
           {{ appointmentLang.service }}次数：<span class="num">{{ obj_info.reserve_num }}</span>
          </div>

        </div>
      </div>
      <div class="services">
          <div class="service-item" v-for="(item,i) in obj_services" :key="i">{{ item.title }}</div>
      </div>
      <div class="tec-content">
        <div :class="tapShow?'':'content'">
          <span class="icon-1"  @click="tapShow = !tapShow" v-if="obj_info.description && obj_info.description.length >52 && !tapShow">查看更多  <van-icon name="arrow-down" color="#fff" /></span>
          <span style="text-align: left;display: block;">简介：{{ obj_info.description }}<span v-if="obj_info.description && obj_info.description.length >52 && tapShow" @click="tapShow = !tapShow" class="icon-2">。收起<van-icon name="arrow-up" color="#fff" /></span></span>
        </div>

      </div>
    </div>
    <div class="shop">
      <div>
        <div class="shoptitle">
          <span style="font-size: 0.875rem;font-weight: bold;color: #3B3B4A;">{{ store_info.name }}</span>
          <div v-if="store_info.distance" class="loaction">距您{{ store_info.distance.distance }}{{store_info.distance.unit}}</div>
        </div>
        <div class="address">{{ store_info.full_address }}</div>
      </div>
      <div class="navBtn">
        <div class="service" @click="cserviceShow = !cserviceShow">
          <i class="iconfont icon-zx_map_tel"></i>
          <span>客服</span>
        </div>
        <div class="service" @click="goToAdress">
          <i class="iconfont icon-zx_map_local"></i>
          <span>导航</span>
        </div>
      </div>
    </div>
    <template v-if="goods&&goods.length!==0">
      <div class="shoptitle-service">{{ appointmentLang.service }}项目</div>
      <div class="shopDateil">
        <div class="shopList">
          <div class="lis" v-for="item in goods" :key="item.id">
            <div class="lis-item">
              <div class="left">
                <img :src="item.thumb" alt="" />
              </div>
              <div class="right">
                <div class="txt">{{ item.title }}</div>
                <div class="sale">已售{{ item.total_sales }}</div>
                <div class="price" v-if="item.has_option == 1">{{ $i18n.t("money") }}{{ item.min_price }}</div>
                <div class="price" v-else>{{ $i18n.t("money") }}{{ item.price }}</div>
              </div>
            </div>
            <div style="flex-shrink: 0;">
              <button class="button"  @click="toGood(item.goods_id)">预约</button>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="introDetail">
      <div class="txt">
        <div class="line dr"></div>
        <span> {{ appointmentLang.service }}人员详情 </span>
        <div class="line dl"></div>
      </div>
      <div style="padding: 0 1rem;">
        <div id="contenBox" v-html="obj_info.content" v-if="obj_info.content"></div>
      </div>
    </div>
    <div style="height: 1.5625rem;"></div>
    <cservice-pop :show="cserviceShow" :cservice="cservice_info.cservice" :service_QRcode="cservice_info.service_QRcode" :service_mobile="cservice_info.service_mobile"></cservice-pop>
  </div>
</template>
<script>
import cservicePop from "@/components/goods/children/plugin/cservicePopup";
import { Toast } from "vant";
export default {
  data() {
    return {
      tapShow: false,
      cservice_info: [],
      goods: [],
      obj_info: [],
      store_info: [],
      obj_services:{},
      cserviceShow: false,
      lat: "",
      lng: "",
      address: ""
    };
  },
  activated() {
    this.fun
      .getLocation("正在定位")
      .then(res => {
        this.address = res.title;
        this.lat = res.point.lat;
        this.lng = res.point.lng;
      })
      .catch(err => {});
    this.getData();
    this.fun.setWXTitle(`${this.appointmentLang.reserve_obj}详情`);
  },
  computed: {
    appointmentLang() {
      if (this.$store.state.shopLanguage?.reserve_simple) {
        return this.$store.state.shopLanguage.reserve_simple;
      } else {
        return { reserve_obj: "预约人员", service: "服务" };
      }
    }
  },
  methods: {
    toGood(key) {
      this.$router.push(this.fun.getUrl("goods", { id: key }));
    },
    goToAdress() {
      let point = this.fun.bd_decrypt(this.store_info.lng, this.store_info.lat);
      this.fun.goToWXAdress(point, this.store_info.name, this.store_info.full_address);
    },
    getData() {
      let myLocation = JSON.parse(localStorage.getItem('myLocation')) || {};
      let lng = this.lng || myLocation.point.lng;
      let lat = this.lat || myLocation.point.lat;
      let json = {id: this.$route.params.id,lng,lat};

      $http
        .get("plugin.reserve-simple.frontend.obj.detail", json, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.obj_services = response.data.obj_services;
            this.obj_info = response.data.obj_info;
            this.cservice_info = response.data.cservice;
            this.store_info = response.data.store_info;
            this.goods = response.data.goods_list;
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
  },
  components: {
    cservicePop
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#AppointmentUserDe ::v-deep  .van-nav-bar__left{
  padding-left: 0.94rem;
}

#AppointmentUserDe ::v-deep .van-nav-bar__content{
  background:var(--themeBaseColor)  !important;
}
#AppointmentUserDe ::v-deep .van-nav-bar__left .van-button {
  background-color: var(--themeBgColor);
}
#AppointmentUserDe ::v-deep  .van-nav-bar .van-icon {
  color:#fff;
}

.shopDateil {
  margin: 0 0.63rem;
  margin-top: 0.63rem;
  border-radius: 0.31rem;
  background-color: #fff;
  padding:0.75rem;
  text-align: left;

  .shopList {
    display: flex;
    flex-direction: column;
    .button{
      background-color: var(--themeBaseColor);
      display: block;
      padding: .375rem 1.5938rem;
      color: #fff;
      border-radius: 1.0938rem;
      font-size: .75rem;
      border: none;
    }
    .lis-item{
      display: flex;
      overflow: hidden;
    }
    .lis:last-child{
      margin-bottom: 0 !important;
    }
    .lis {
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      margin-bottom: 1.25rem;
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 1.75rem;

        .sale {
          font-size: 0.75rem;
          color: #AAAAB3;
        }

        .price {
          font-size: 1rem;
          color: #F15353;
          font-weight: 500;
        }

        .txt {
          margin-top: 0.3125rem;
          font-size: 0.875rem;
          color: #3B3B4A;
          font-weight: 400;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }

      .left {
        margin-right: 0.63rem;
        width: 4.375rem;
        height: 4.375rem;
        background-color: #9d9d9d;
        border-radius: 0.31rem;

        img {
          width: 4.375rem;
          height: 4.375rem;
          background-color: #9d9d9d;
          border-radius: 0.31rem;
        }
      }
    }
  }


}
.shoptitle-service {
    font-size: 1rem;
    color: #3B3B4A;
    font-weight: 400;
    text-align: left;
    margin: 0.75rem;
}
.loaction{
      position: relative;
      margin-left: 0.25rem;
      padding: .2813rem 0.5rem;
      font-size: .6875rem;
      border-radius: 0.75rem;
      overflow: hidden;
      color: var(--themeBaseColor);
    }
.loaction::after{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content:"";
  background: var(--themeBaseColor);
  opacity: .1;
}
.distance{
    font-size: .6875rem !important;
    padding: 0.2813rem 0.5rem;
    box-sizing: border-box;
    width: 100%;
    height: 1.25rem;
    border-radius: 100px;
    background-color: var(--themeBaseColor);
    color: var(--themeBaseColor);
    opacity: .3;
    z-index: 1;
 }
.introDetail {
  border-radius: 0.31rem;
  padding: 0.44rem;
  background-color: #fff;
  margin: 0.75rem;

  #contenBox {
    width: 100%;
    overflow: hidden;

    ::v-deep img {
      max-width: 100%;
      height: auto;
    }

    ::v-deep em {
      font-style: italic;
    }
  }

  .txt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:1rem;
    margin-top: 0.75rem;
    color: #9a9a99;
    padding: 0 0.69rem;
    box-sizing: border-box;
    overflow: hidden;

    .line {
      background: #ced0d2;
      width: 3rem;
      height: 1px;
    }

    .dr {
      margin-right: 0.8rem;
    }

    .dl {
      margin-left: 0.8rem;
    }
  }
}

.shop {
  margin: 0.5rem 0.63rem 0;
  border-radius: 0.31rem;
  background-color: #fff;
  padding:0.75rem;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .navBtn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 3.5625rem;

    .service:first-child{
        margin-right: 1rem;
      }
    .service {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #AAAAB3;
      font-size: 0.625rem;

      .iconfont {
        color: var(--themeBaseColor);
        font-size: 1rem;
        margin-bottom: .25rem;
      }

      .icon-fontclass-yunkefu {
        color: #fc8200;
      }

      .icon-fontclass-tuiguang2 {
        color: #f42a26;
      }
    }
  }

  .address {
    font-size: 0.75rem;
    color: #6E6E79;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .shoptitle {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #353434;
    margin-bottom: 0.4rem;
  }
}
.userDetail {
  position: relative;
  overflow: hidden;
  padding: 0.94rem;
  box-sizing: border-box;
  background-image: url(../../assets/images/AppointmentUser.png);
  background-repeat: no-repeat;
  background-size: 100% 10rem;
  color:#fff;
  &::after {
    width: 140%;
    height: 100%;
    position: absolute;
    left: -20%;
    top: 0;
    z-index: -1;
    content: '';
    background: var(--themeBaseColor);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 38%;
    border-bottom-left-radius: 38%;
  }
.text-spread-container{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 控制显示行数
  -webkit-box-orient: vertical;
  word-break: break-all;
  color: #fff;
}
.text-spread-container::after{
  content: "";
  float: right;
  clear: both;
  height: 0.7813rem;
}


  .tapBottin {
    width: 50px;
    float: right;
    clear: both;
    color: #fff;
  }
  .tec-content-more{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #fff;
  }
  .tec-content-more::after{
    content:"";
    width: 50px;
    float: right;
  }
  .hidenShow {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
.tec-content{
  display: flex;
  color: #fff;
  margin-top: .25rem;
  .content{
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .content:before {
  content: '';
  float: right;
  height: calc(100% - 18px);
  }
  .icon-2 .iconfont {
    margin-left: 0.25rem;
  }

  .icon-1 {
    display: flex;
    align-items: center;
    width: 80px;
    float: right;
    clear: both;
  }
  .icon-1 .iconfont {
    margin-left: 0.25rem;
  }
}
  .icon-cop {
    position: absolute;
    right: 0.8rem;
    top: 0.2rem;
    text-align: right;
    width: 0.8rem;
    height: 1.2rem;
    display: block;
    background: rgba(245, 245, 245, 0.69);
  }

  .intro {

    // margin-top: 0.66rem;
    text-align: left;
    font-size: 0.75rem;
    color: #fff;
    // margin-bottom: 0.72rem;
  }

  .services{
      display: flex;
      flex-wrap: wrap;
      margin-left: 4rem;
    }
    .service-item{
      padding:0 .25rem;
      margin:0 .5rem 0.5rem 0;
      height: 1.25rem;
      line-height: 1.25rem;
      overflow: hidden;
      border: 1px solid #fff;
      border-radius: 0.125rem;
      font-size: .75rem;
    }
  .usetTop {
    display: flex;
    // margin-bottom: 0.75rem;

    .detail {
      padding: .5625rem 0 0;
      box-sizing: border-box;
      text-align: left;

      .name {
        font-size: 0.88rem;
        font-weight: bold;
        margin-bottom: .6563rem;
      }

      .total {
        margin-top: -.2rem;
        font-size: 0.75rem;
      }
    }

    .imgbox {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 100px;
      overflow: hidden;
      margin-right: 0.72rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>